<template>
  <div class="outBox">
    <div
        :class="['suspendBox', { move: !state.canDrag }]"
        :style="{top:state.top+'px',left:state.left+'px'}"
        @mousedown="MouseDown"
        @mouseup="MouseUp"
        @mouseenter="MouseEnter"
        @mouseleave="MouseLeave"
    >
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup name='Suspend'>
import {} from 'vue'
import {ElMessage} from "element-plus";

let props = defineProps({
  ableMove: {type: Boolean, default: true},  //是否可移动
  ableHide: {type: Boolean, default: true},  //是否靠边隐藏
  hoverShow: {type: Boolean, default: true},  //图标隐藏时 鼠标悬浮即展示，否则点击展示
  distance: {type: Number, default: 5},  //距离边界多少px就隐藏
  defaultX: {type: Number, default: 1},  //初始横坐标百分比
  defaultY: {type: Number, default: 0.9}  //初始纵坐标百分比
});

const state = reactive({
  canDrag: false,
  isClick: false,
  x0: 0,
  y0: 0,
  top: 60,
  left: 10000
})

const MouseDown = (e: MouseEvent) => {
  if (e.button == 0) {
    state.canDrag = props.ableMove;
    state.isClick = true;
    state.x0 = e.clientX;
    state.y0 = e.clientY;
  }
}
// 鼠标移动
const onRangeMouseMove = (e: MouseEvent) => {
  if (state.canDrag) {
    state.isClick = false;
    let x = e.clientX - state.x0;
    let y = e.clientY - state.y0;
    let img: any = document.querySelector(".suspendBox");
    let box: any = document.querySelector(".outBox");
    if (
        img.offsetLeft + x < 0 ||
        img.offsetTop + y < 0 ||
        img.offsetLeft + x > box.offsetWidth - img.offsetWidth ||
        img.offsetTop + y > box.offsetHeight - img.offsetHeight
    ) {
      return false;
    }
    state.left = img.offsetLeft + x;
    state.top = img.offsetTop + y;
    state.x0 = e.clientX;
    state.y0 = e.clientY;
  }
}
// 鼠标抬起
const onRangeMouseUp = () => {
  state.canDrag = false;
  hide();
}
onMounted(() => {
  hide();
  document.addEventListener('mousemove', onRangeMouseMove, false)
  document.addEventListener('mouseup', onRangeMouseUp, false)
})
onBeforeUnmount(() => {
  document.removeEventListener('mousemove', onRangeMouseMove, false)
  document.removeEventListener('mouseup', onRangeMouseUp, false)
})

const MouseUp = () => {
  state.canDrag = false;
  show();
}

const MouseEnter = () => {
  if (props.hoverShow) {
    show();
  }
}

const MouseLeave = () => {
  hide()
}

const show = () => {
  let img: any = document.querySelector(".suspendBox");
  let box: any = document.querySelector(".outBox");
  if (img.offsetLeft < 0) {
    state.left = 0;
  } else if (img.offsetLeft > box.offsetWidth - img.offsetWidth) {
    state.left = box.offsetWidth - img.offsetWidth
  } else if (state.isClick) {
    clickEvent()
    state.isClick = false;
  }
}
const hide = () => {
  if (props.ableHide) {
    let img: any = document.querySelector(".suspendBox");
    let box: any = document.querySelector(".outBox");
    if (!state.canDrag && img.offsetLeft < props.distance) {
      state.left = -img.offsetWidth * 2 / 3;
    } else if (!state.canDrag && img.offsetLeft > box.offsetWidth - img.offsetWidth - props.distance) {
      state.left = box.offsetWidth - img.offsetWidth / 3
    }
  }
}
const clickEvent = () => {      //悬浮窗的点击事件
  ElMessage.success('我是悬浮按钮')
}

</script>

<style scoped lang='less'>
.outBox {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  z-index: 100;
  pointer-events: none;
}

.suspendBox {
  position: absolute;
  pointer-events: auto;
}

.move {
  transition: 0.3s linear;
  -moz-transition: 0.3s linear; /* Firefox 4 */
  -webkit-transition: 0.3s linear; /* Safari 和 Chrome */
  -o-transition: 0.3s linear; /* Opera */
}
</style>
